<template>
  <div class="bg">
    <el-row>
      <el-col :span="4" :offset="8">
        <p>
          <el-button
            type="primary"
            style="background-color:#0d9C98; border-color:#0d9C98; width:150px"
            @click="toWrite"
            size="small"
            class="buttonSet2 buttonFontSize"
          >我要写信</el-button>
        </p>
      </el-col>
      <el-col :span="4">
        <p>
          <el-button
            type="primary"
            style="background-color:#0d4D9C; border-color:#0d4D9C"
            @click="toList"
            size="small"
            class="buttonSet2 buttonFontSize"
          >
            查看信件列表
            <span style="color:#DCCA16">({{mail_count}}条)</span>
          </el-button>
        </p>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <el-form :inline="true">
          <el-form-item>
            <template #label>
              <span class="textFontSize">发布时间:</span>
            </template>
            <div>
              <el-date-picker
                v-model="timeArea"
                type="datetimerange"
                :picker-options="pickerOptions"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                align="right"
              ></el-date-picker>
            </div>
          </el-form-item>

          <!-- <el-form-item >
            <template #label>
              <span class="textFontSize">回复状态:</span>
            </template>
            <el-select v-model="handledStatus" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item> -->

          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="queryMails()"
              style="background-color:#0e4D9D; border-color:#0e4D9D;height: 40px; font-size:18px"
              v-loading.fullscreen.lock="fullscreenLoading"
            >查询</el-button>

            <el-button
              @click="reset()"
              style="height: 40px;font-size:18px"

            >重置</el-button>
          </el-form-item>
          <el-form-item></el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-table
          :data="tableData"
          style="width: 100%"
          stripe
          border
          :cell-style="{fontSize:'18px'}"
          :header-cell-style="{background:'#E1E5EE',color:'#586168',fontSize:'18px' }"
        >
          <el-table-column label="序号" width="80">
            <template slot-scope="scope">{{scope.$index+1}}</template>
          </el-table-column>

          <el-table-column label="问题内容">
            <template slot-scope="scope">{{scope.row.content | ellipsis}}</template>
          </el-table-column>
          <el-table-column prop="createTime" label="发布时间" width="250"></el-table-column>
          <el-table-column prop="updateTime" label="更新时间" width="250"></el-table-column>
          <!-- <el-table-column prop="isSolved" label="是否解决" width="100"></el-table-column> -->
          <el-table-column label="状态" width="200">
            <template slot-scope="scope">

              <!-- <span v-if="scope.row.isSolved === 1" class="pointGrey"></span>
              <span v-else-if="scope.row.isHandled === 1 && scope.row.isSolved === 0" class="pointGreen"></span>
              <span v-else-if="scope.row.isHandled === 0 && scope.row.isSolved === 0" class="pointRed"></span>
              <span v-else class="pointGrey"></span> -->
              <span>{{ scope.row.mailboxStatusDescr }}</span>

            </template>
          </el-table-column>
          <el-table-column label="角色" width="200">
            <template slot-scope="scope">

              <!-- <span v-if="scope.row.isSolved === 1" class="pointGrey"></span>
              <span v-else-if="scope.row.isHandled === 1 && scope.row.isSolved === 0" class="pointGreen"></span>
              <span v-else-if="scope.row.isHandled === 0 && scope.row.isSolved === 0" class="pointRed"></span>
              <span v-else class="pointGrey"></span> -->
              <!-- <span>{{ scope.row.isSolved | replyFilter }}</span> -->
              <span>{{ scope.row.role }}</span>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button @click="toDetail(scope.row)" type="text"><span class="textFontSize" >查看详情</span></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-pagination
          style="text-align:right"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryData.pageNum"
          :page-sizes="[5, 10]"
          :page-size="queryData.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="queryData.total"
        ></el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { Api } from "../api/api_config";
export default {
  data() {
    return {
      timeArea: [],
      tableData: [],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      filters: {
        ellipsis(value) {
          if (!value) return "";
          let text = value.replace(/<[^<>]+>/g,"");
          if (text.length > 32) {
            return text.slice(0, 32) + "...";
          }
          return text;
        },
      },
      options: [
        {
          value: "0",
          label: "全部"
        },
        {
          value: "500",
          label: "未回复"
        },
        {
          value: "501",
          label: "已回复"
        },
        {
          value: "502",
          label: "未回复",
        }
      ],
      handledStatus: "0",
      queryData: {},
      fullscreenLoading: false,
      mail_count: 0
    };
  },
  mounted() {
    this.initData();
  },
  filters: {
    ellipsis(value) {
      if (!value) return "";
      let text = value.replace(/<[^<>]+>/g,"");
      if (text.length > 32) {
        return text.slice(0, 32) + "...";
      }
      return text;
    },
    replyFilter(value) {
      if (value === '0' || value === 0) {
        return '未解决'
      } else {
        return '已解决'
      }
    }
  },
  methods: {
    initData() {
      this.queryData = {
        empId: this.$store.state.empId,
        pageNum: 1,
        pageSize: 5,
        isPc: true,
        total: 0,
      };
      this.queryMails();
    },
    queryMails() {
      // 拼接查询参数
      let url = Api.all.queryMails;
      url += "?empId=" + this.queryData.empId;
      url += "&mailboxStatusFlag=104";
      url += "&pageNum=" + this.queryData.pageNum;
      url += "&pageSize=" + this.queryData.pageSize;
      if (this.timeArea !== null && this.timeArea.length > 0) {
        url += "&startTime=" + this.changeDataString(this.timeArea[0]);
        url += "&overTime=" + this.changeDataString(this.timeArea[1]);
      }
      if (this.handledStatus !== "0") {
        url += "&mailboxStatusFlag1=" + this.handledStatus;
      }
      let that = this;
      this.fullscreenLoading = true;
      this.$axios
        .post(url)
        .then(function (response) {
          // console.log(JSON.stringify(response.data));
          if (response.data !== null) {
            that.tableData = response.data.data.mailBoxRecordJsons;
            that.queryData.total = response.data.data.totalCount;
            that.mail_count = response.data.data.totalCount;
          }
          that.fullscreenLoading = false;
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    handleSizeChange(val) {
      this.queryData.pageSize = val;
      this.queryData.pageNum = 1;
      this.queryMails();
    },
    handleCurrentChange(val) {
      this.queryData.pageNum = val;
      this.queryMails();
    },
    reset() {
      this.handledStatus = '2'
      this.timeArea = []
    },
    toDetail(e) {
      // this.$router.push("/mailDetail");
      this.$store.state.selectedMail = e;
      this.$router.push({ path: "/mailDetail", params: { mail: e } });
    },
    toWrite() {
      this.$router.push('/newMail');
    },
    toList() {
      this.$router.push('/mailList');
    },
    changeDataString(dateInput) {
      let year = dateInput.getFullYear();
      let month = dateInput.getMonth() + 1;
      let theDate = dateInput.getDate();

      let hour = dateInput.getHours();
      let minute = dateInput.getMinutes();
      let second = dateInput.getSeconds();

      if (month < 10) {
        month = "0" + month;
      }

      if (theDate < 10) {
        theDate = "0" + theDate;
      }

      if (hour < 10) {
        hour = "0" + hour;
      }

      if (minute < 10) {
        minute = "0" + minute;
      }

      if (second < 10) {
        second = "0" + second;
      }

      return (
        year +
        "-" +
        month +
        "-" +
        theDate +
        " " +
        hour +
        ":" +
        minute +
        ":" +
        second
      );
    },
  },
};
</script>

<style scoped>
.pointGrey {
  width: 10px;
  height: 10px;
  background-color: #cccccc;
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px;
}

.pointGreen {
  width: 10px;
  height: 10px;
  background-color: #07c160;
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px;
}

.pointRed {
  width: 10px;
  height: 10px;
  background-color: #DC143C;
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px;
}


.bg {
  filter:progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=4);/*ie*/
  -moz-box-shadow: 2px 2px 10px #909090;/*firefox*/
  -webkit-box-shadow: 2px 2px 10px #909090;/*safari或chrome*/
  box-shadow:2px 2px 10px #909090;/*opera或ie9*/
  border: 1px soild #ccc;
  border-radius: 10px;
  -webkit-border-radius: 9px;
  -moz-border-radius: 9px;
  background-color: white;
  padding: 10px 10px 10px 10px;
}
</style>
